<template>
  <div>
    <el-breadcrumb separator="/" style="margin-bottom: 20px;">
      <el-breadcrumb-item :to="{ path: '/' }">用户管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/user/list' }"
        >用户列表</el-breadcrumb-item
      >
      <el-breadcrumb-item>添加用户</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row style="text-align: right">
        <el-button type="primary" @click="reset">返回</el-button>
      </el-row>
      <el-col :span="12">
        <el-form
          ref="userFormRef"
          :rules="userFormRules"
          :model="userForm"
          label-width="120px"
        >
          <el-form-item label="姓名">
            <el-input v-model="userForm.name"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-input v-model="userForm.sex"></el-input>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="userForm.age"></el-input>
          </el-form-item>
          <el-form-item label="身份证号">
            <el-input v-model="userForm.number"></el-input>
          </el-form-item>
          <el-form-item label="电话号码">
            <el-input v-model="userForm.telephone"></el-input>
          </el-form-item>
          <el-form-item label="密码" v-if="!uid">
            <el-input type="password" v-model="userForm.password"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="userForm.UserAddress"></el-input>
          </el-form-item>
          <el-form-item label="角色">
            <el-select
              v-model="userForm.role"
              placeholder="请选择角色"
              style="width: 100%;"
            >
              <el-option label="管理员" value="admin"></el-option>
              <el-option label="学生" value="student"></el-option>
              <el-option label="老师" value="teacher"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-row style="text-align: center;">
          <el-button type="primary" @click="addUser">{{
            uid ? "编辑并保存" : "添加并保存"
          }}</el-button>
        </el-row>
      </el-col>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userForm: {},
      userFormRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        number: [
          { required: true, message: "请输入身份证号", trigger: "blur" }
        ],
        telephone: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          {
            validator: function(rule, value, callback) {
              if (/^1[34578]\d{9}$/.test(value) == false) {
                callback(new Error("请输入正确的手机号"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 30, message: "长度在 6 到 30 个字符", trigger: "blur" }
        ],
        // 地址
        UserAddress: [{ required: true, message: "请输入地址", trigger: "bulr" }],
        // 角色
        role: [{ required: true, message: "请输入角色", trigger: "change" }]
      }
    };
  },
  mounted() {
    if (this.$route.params.id) {
      this.getList();
    }
  },
  computed: {
    uid() {
      return this.$route.params.id;
    }
  },
  methods: {
    reset() {
      this.$router.push({ name: "userlist" });
    },
    getList() {
      this.$api.get(`/api/user/detail/${this.$route.params.id}`).then(res => {
        this.userForm = res.data.data;
      });
    },
    addUser() {
      this.$refs["userFormRef"].validate(valid => {
        if (valid) {
          // console.log(this.userForm);
          if (this.uid) {
            this.$api
              .post(`/api/user/edit/${this.userForm._id}`, this.userForm)
              .then(res => {
                // 注册成功
                this.$message({
                  message: "编辑用户成功",
                  type: "success"
                });
                this.$router.push({ name: "userlist" });
              });
          } else {
            this.$api.post("/api/user/add", this.userForm).then(res => {
              // 注册成功
              this.$message({
                message: "添加用户成功",
                type: "success"
              });
              this.$router.push({ name: "userlist" });
            });
          }
        } else {
          this.$message.error("请填写必填项");
          return false;
        }
      });
    }
  }
};
</script>

<style scope></style>
